<template>

  <el-table
    :data="students"
    boeder
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column> -->
    <el-table-column
      prop="gender"
      label="性别"
      width="180">
      </el-table-column>
      <el-table-column
      prop="tx"
      label="操作"
      width="180">
      <template slot-scope="scope">
        <el-button  type="primary" size="small" @click="update(scope.row.studentId)">修改</el-button>
        <!-- scope.row 当前对象的一行 -->
        <el-button size="small" type="danger" @click="del(scope.row.studentId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
</template>

<script>
import {del} from '../service'
import {showStuById} from '../service'
import {mapMutations,mapActions,mapState} from 'vuex'
  export default {
    computed:{
      ...mapState("student",["students"])
    },
    created(){
       this.setStudents();
    },
    methods:{
      del(id){
        this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
           del(id);
          this.setStudents(); 
        }).catch(() => {        
        });
      },
     async update(id){
      //   let response= await showStuById(id);
      // let student =response;
      // this.$emit("setStudent",student);
      this.setStudent(id);
      this.setDialogVisible(true);
      },
      ...mapMutations("student",["setDialogVisible"]),
      ...mapActions("student",["setStudent","setStudents"])
    }
  }
</script>

<style>

</style>